<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>flow - javascript ui</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="icon" href="../favicon.ico" />
	<link rel="stylesheet" href="css/page.css" type="text/css"/>
	<link rel="stylesheet" href="../css/flow.css" type="text/css"/>
	
	<link rel="stylesheet" href="../fonts/open-sans/open-sans.css" type="text/css"/>
	<link rel="stylesheet" href="../fonts/tabler-icons/tabler-icons.css" type="text/css"/>

	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/monaco-editor@latest/min/vs/editor/editor.main.css">
	<!-- -->
</head>
<style>
/*
flow {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 50%;
	height: 50%;
}
*/
</style>
<body>
	<script src="https://cdn.jsdelivr.net/npm/monaco-editor@latest/min/vs/loader.min.js"></script>
	<flow></flow>
	<script type="module">

		import * as Flow from '../jsm/Flow.js';

		const node = new Flow.Node();
		node.setWidth( 500 );
		node.setPosition( 100, 100 );
		let element;
		//node.add( new Flow.TitleElement( 'SEA3D Loader' ).setColor( 'purple' ).setOutput( 1 ).setOutputColor( 'fuchsia' ) );
		node.add( new Flow.TitleElement( 'SEA3D Loader' ).setOutput( 1 ).setOutputColor( 'orange' ) );
		node.add( element = new Flow.Element() );		

		element.setHeight( 500 );

		const editorDOM = document.createElement( 'div' );
		editorDOM.style.width = '100%';
		editorDOM.style.height = '100%';

		element.dom.appendChild( editorDOM );
		
		const canvas = new Flow.Canvas();
		canvas.setSize( window.innerWidth, window.innerHeight );
		canvas.add( node );

		window.onresize = () => canvas.setSize( window.innerWidth, window.innerHeight );

		( () => {

            require.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@latest/min/vs' }});

			require(['vs/editor/editor.main'], async () => {

				const response = await fetch('./lib/typescriptlang.org.d.ts');
				//const response = await fetch('https://raw.githubusercontent.com/kontan/three.d.ts/master/three.d.ts');
  				const threejsLib = await response.text();
/*
				monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
					noSemanticValidation: false,
					noSyntaxValidation: false,
				});
*/
				monaco.languages.typescript.javascriptDefaults.addExtraLib(
					'const test = "test";'
				);

				monaco.languages.typescript.javascriptDefaults.addExtraLib([
					'declare class SomeEventType {',
					'    /**',
					'     * Heres the doco for someProperty',
					'     */',
					'    someProperty: string',
					'}',
					].join('\n')
				);

				let lib = 'module THREE {' + threejsLib + '}';
				monaco.languages.typescript.javascriptDefaults.addExtraLib(
					lib
				);

				const editor = monaco.editor.create(editorDOM, {
					value: [
						'function x() {',
						'\tconsole.log("Hello world!");',
						'}'
					].join('\n'),
					language: 'javascript',
					theme: 'vs-dark'
				});
			});

			/*
			let editor = monaco.editor.create(document.getElementById('container'), {
				value: [
					'function x() {',
					'\tconsole.log("Hello world!");',
					'}'
				].join('\n'),
				language: 'javascript',
				theme: 'vs-dark'
			});
			
			editor.addListener('didType', () => {
				console.log(editor.getValue());
			});
			*/

		} )();

		const dom = document.querySelector( 'flow' );
		
		dom.appendChild( canvas.dom );

	</script>
</body>
</html>